<template>
  <div class="level">
    <div class="privilege">一、等级介绍</div>
    <div class="menbership">
      <div>1、礼物打赏金额可增加财富等级经验值，1经验值=1钻石</div>
      <div>
        2、不同的财富经验值对应不同财富等级，不同财富等级拥有不同的勋章和进场特效
      </div>
      <div>3、财富等级只能升级不会降级，充值时不会增加经验值</div>
    </div>

    <div class="privilege">二、等级特权</div>
    <ul class="level_rich">
      <li>
        <div>会员等级</div>
        <div>勋章</div>
        <div>座驾</div>
      </li>
      <li v-for="(item, index) in richList" :key="index">
        <div>{{ item.level }}</div>
        <div><img :src="item.img" /></div>
        <div>
          <img v-if="item.car" :src="item.car" />
          <div v-else>-</div>
        </div>
      </li>
    </ul>
    <div class="privilege">三、等级所需经验值</div>
    <ul class="level_rich_">
      <li>
        <div>会员等级</div>
        <div>所需经验</div>
      </li>
      <li v-for="(item, index) in richList_" :key="index">
        <div>{{ item.level }}</div>
        <div>{{ item.car }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
// import level1 from "../../public/img/level/level1.png";
// import level11 from "../../public/img/level/level11.png";
// import level21 from "../../public/img/level/level21.png";
// import level31 from "../../public/img/level/level31.png";
// import level41 from "../../public/img/level/level41.png";

export default {
  data() {
    return {
      richList: [
        // {
        //   level: "Lv.1-Lv.10",
        //   img: level1,
        //   car: "",
        // },
        // {
        //   level: "Lv.11-Lv.20",
        //   img: level11,
        //   car: "",
        // },
        // {
        //   level: "Lv.21-Lv.30",
        //   img: level21,
        //   car: "",
        // },
        // {
        //   level: "Lv.31-Lv.40",
        //   img: level31,
        //   car: "",
        // },
        // {
        //   level: "Lv.41-Lv.50",
        //   img: level41,
        //   car: level41,
        // },
      ],
      richList_: [
        {
          level: "Lv.1",
          car: "10",
        },
        {
          level: "Lv.2",
          car: "20",
        },
        {
          level: "Lv.3",
          car: "30",
        },
        {
          level: "Lv.4",
          car: "40",
        },
        {
          level: "Lv.5",
          car: "50",
        },
      ],
    };
  },
  created() {},
  methods: {},
};
</script>
<style scoped>
.level {
  width: 100vw;
  overflow: auto;
}
.menbership {
  width: 88vw;
  margin-left: 6vw;
  overflow: hidden;
  margin-top: 5.6vw;
}
.menbership > div {
  font-size: 3.2vw;
  line-height: 6.5vw;
  color: #666666;
}
.privilege {
  width: 88vw;
  margin-left: 6vw;
  margin-top: 8.5vw;
  font-weight: bold;
  font-size: 4.2vw;
  margin-bottom: 5vw;
}
.level_rich {
  width: 88vw;
  margin-left: 6vw;
  overflow: hidden;
  margin-top: 2.5vw;
}
.level_rich > li {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  width: 88vw;
  text-align: center;
}
.level_rich > li > div {
  height: 10.1vw;
  line-height: 10.1vw;
  box-sizing: border-box;
  border-bottom: 1px solid #ffc4ad;
  border-right: 1px solid #ffc4ad;
  text-align: center;
}
.level_rich > li > div:nth-child(1) {
  width: 32vw;
  font-size: 3.5vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  border-left: 1px solid #ffc4ad;
  color: #333333;
}
.level_rich > li > div:nth-child(2) {
  width: 28vw;
}
.level_rich > li > div:nth-child(2) > img {
  height: 9vw;
}
.level_rich > li > div:nth-child(3) {
  width: 28vw;
}
.level_rich > li > div:nth-child(3) > img {
  height: 9vw;
}
.level_rich > li > div:nth-child(3) > div {
  height: 9vw;
  color: #666666;
}
.level_rich > li:nth-child(1) {
  height: 10.4vw;
  background: #fff1eb;
  box-sizing: border-box;
 border-bottom: 1px solid #fff1eb;
}
.level_rich > li:nth-child(1) > div {
  /* box-sizing: border-box; */
  /* border: none; */
  height: 10.4vw;
  line-height: 10.4vw;
  font-size: 3.7vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #fe804d;
  box-sizing: border-box;
  /* border-left: 1px solid #ffc4ad; */
  border-top: 1px solid #ffc4ad;
}

.level_rich_ {
  width: 88vw;
  margin-left: 6vw;
  overflow: hidden;
  margin-top: 2.5vw;
  margin-bottom: 10vw;

}
.level_rich_ > li {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  width: 88vw;
  text-align: center;
}
.level_rich_ > li > div {
  height: 10.1vw;
  line-height: 10.1vw;
  box-sizing: border-box;
  border-bottom: 1px solid #ffc4ad;
  border-right: 1px solid #ffc4ad;
  text-align: center;
}
.level_rich_ > li > div:nth-child(1) {
  width: 32vw;
  font-size: 3.5vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  border-left: 1px solid #ffc4ad;
  color: #333333;
}
.level_rich_ > li > div:nth-child(2) {
  width: 56vw;
  font-size: 3.2vw;
  color: #666666;
}
.level_rich_ > li > div:nth-child(2) > img {
  height: 9vw;
}

.level_rich_ > li:nth-child(1) {
  width: 87.8vw;
  height: 10.4vw;
  background: #fff1eb;
  border-right: 1px solid #ffc4ad;
}
.level_rich_ > li:nth-child(1) > div {
  border: none;
  height: 10.4vw;
  line-height: 10.4vw;
  font-size: 3.7vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #fe804d;
  border-left: 1px solid #ffc4ad;
  border-top: 1px solid #ffc4ad;
}
</style>